<template>
  <div class="app-container">
    <el-card class="box-card" v-loading="loading">
      <template #header>
        <div class="card-header">
          <span>订单支付</span>
        </div>
      </template>

      <div v-if="orderInfo" class="pay-content">
        <div class="pay-info">
          <div class="amount">
            <span class="label">支付金额</span>
            <span class="price">¥{{ orderInfo.totalAmount }}</span>
          </div>
          <div class="order-no">
            订单编号：{{ orderInfo.orderNo }}
          </div>
        </div>

        <div class="pay-methods">
          <h3>选择支付方式</h3>
          <el-radio-group v-model="payMethod">
            <div class="pay-method-item">
              <el-radio label="balance">
                <div class="method-content">
                  <i class="el-icon-wallet"></i>
                  <div class="method-info">
                    <div class="method-name">余额支付</div>
                    <div class="method-desc">当前可用余额：¥{{ userBalance }}</div>
                  </div>
                </div>
              </el-radio>
            </div>
            <div class="pay-method-item">
              <el-radio label="wechat" disabled>
                <div class="method-content">
                  <i class="el-icon-chat-dot-square"></i>
                  <div class="method-info">
                    <div class="method-name">微信支付</div>
                    <div class="method-desc">暂未开通</div>
                  </div>
                </div>
              </el-radio>
            </div>
            <div class="pay-method-item">
              <el-radio label="alipay" disabled>
                <div class="method-content">
                  <i class="el-icon-money"></i>
                  <div class="method-info">
                    <div class="method-name">支付宝支付</div>
                    <div class="method-desc">暂未开通</div>
                  </div>
                </div>
              </el-radio>
            </div>
          </el-radio-group>
        </div>

        <div class="pay-actions">
          <el-button @click="goBack">取消</el-button>
          <el-button 
            type="primary" 
            :loading="paying"
            @click="handlePay"
          >
            立即支付
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 支付结果对话框 -->
    <el-dialog
      v-model="resultVisible"
      :title="paySuccess ? '支付成功' : '支付失败'"
      width="400px"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="pay-result">
        <i :class="paySuccess ? 'el-icon-success success' : 'el-icon-error error'></i>
        <div class="result-message">
          {{ paySuccess ? '订单支付成功' : '订单支付失败，请重试' }}
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button 
            type="primary" 
            @click="handleResultConfirm"
          >
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getOrder, payOrder } from '@/api/mall/order'

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const paying = ref(false)
const orderInfo = ref(null)
const payMethod = ref('balance')
const userBalance = ref(1000) // 模拟用户余额
const resultVisible = ref(false)
const paySuccess = ref(false)

// 获取订单信息
const getOrderInfo = async () => {
  loading.value = true
  try {
    const response = await getOrder(route.params.orderId)
    orderInfo.value = response.data
  } catch (error) {
    console.error('获取订单信息失败:', error)
    ElMessage.error('获取订单信息失败')
  } finally {
    loading.value = false
  }
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 处理支付
const handlePay = async () => {
  if (payMethod.value === 'balance') {
    if (userBalance.value < orderInfo.value.totalAmount) {
      ElMessage.warning('余额不足')
      return
    }

    paying.value = true
    try {
      await payOrder({
        orderId: orderInfo.value.orderId,
        payMethod: payMethod.value
      })
      paySuccess.value = true
      resultVisible.value = true
    } catch (error) {
      console.error('支付失败:', error)
      paySuccess.value = false
      resultVisible.value = true
    } finally {
      paying.value = false
    }
  }
}

// 处理支付结果确认
const handleResultConfirm = () => {
  resultVisible.value = false
  if (paySuccess.value) {
    router.push('/mall/order/list')
  }
}

onMounted(() => {
  getOrderInfo()
})
</script>

<style scoped>
.pay-content {
  max-width: 800px;
  margin: 0 auto;
}

.pay-info {
  text-align: center;
  margin-bottom: 40px;
}

.amount {
  margin-bottom: 10px;
}

.amount .label {
  font-size: 16px;
  margin-right: 10px;
}

.amount .price {
  font-size: 30px;
  color: #f56c6c;
  font-weight: bold;
}

.order-no {
  color: #666;
}

.pay-methods {
  margin-bottom: 40px;
}

.pay-methods h3 {
  margin: 0 0 20px;
  font-size: 16px;
  font-weight: bold;
}

.pay-method-item {
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
}

.pay-method-item:last-child {
  border-bottom: none;
}

.method-content {
  display: flex;
  align-items: center;
  margin-left: 30px;
}

.method-content i {
  font-size: 24px;
  margin-right: 15px;
}

.method-info {
  flex: 1;
}

.method-name {
  font-size: 16px;
  margin-bottom: 5px;
}

.method-desc {
  color: #666;
  font-size: 14px;
}

.pay-actions {
  text-align: center;
}

.pay-result {
  text-align: center;
  padding: 20px 0;
}

.pay-result i {
  font-size: 48px;
  margin-bottom: 15px;
}

.pay-result i.success {
  color: #67c23a;
}

.pay-result i.error {
  color: #f56c6c;
}

.result-message {
  font-size: 16px;
}

.dialog-footer {
  text-align: center;
}
</style> 